<div class="content-section introduction">
    <div>
        <span class="feature-title">Growl</span>
        <span>Growl is used to display messages in an overlay.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-growl [(value)]="msgs"></p-growl>

    <div>
        <button type="button" pButton (click)="showSuccess()" label="Success" class="ui-button-success"></button>
        <button type="button" pButton (click)="showInfo()" label="Info" class="ui-button-info"></button>
        <button type="button" pButton (click)="showWarn()" label="Warn" class="ui-button-warning"></button>
        <button type="button" pButton (click)="showError()" label="Error" class="ui-button-danger"></button>
        <button type="button" pButton (click)="showMultiple()" label="Multiple"></button>
        <button type="button" pButton (click)="clear()" icon="fa-close" style="float:right" label="Clear"></button>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;GrowlModule&#125; from 'primeng/primeng';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>A single message is specified by Message interface in PrimeNG that defines the id, severity, summary and detail as properties.
            Messages to display on growl are defined using the value property which should an array of Message instances.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-growl [(value)]="msgs"&gt;&lt;/p-growl&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;Message&#125; from 'primeng/primeng';

export class MyModel &#123;

    msgs: Message[] = [];

&#125;
</code>
</pre>

            <h3>Severities</h3>
            <p>Here are the possible values for the severity of a message.</p>
            <ul>
                <li>success</li>
                <li>info</li>
                <li>warn</li>
                <li>error</li>
            </ul>

            <h3>Showing Messages</h3>
            <p>Adding messages to the array is enough to display them via growl. Similary removing a message
            from the array is also removed by growl.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-growl [(value)]="msgs"&gt;&lt;/p-growl&gt;
    
&lt;button type="button" (click)="show()"&gt;Show&lt;/button&gt;
&lt;button type="button" (click)="clear()"&gt;Hide&lt;/button&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
show() &#123;
    this.msgs.push(&#123;severity:'info', summary:'Info Message', detail:'PrimeNG rocks'&#125;);
&#125;

hide() &#123;
    this.msgs = [];
&#125;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Default</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>value</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of messages to display.</td>
                        </tr>
                        <tr>
                            <td>sticky</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When defined, growl messages are not removed automatically after a period defined by life option.</td>
                        </tr>
                        <tr>
                            <td>life</td>
                            <td>number</td>
                            <td>3000</td>
                            <td>Time to display a message in milliseconds before removing it.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3>Events</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Parameters</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onClose</td>
                            <td>message: Removed message</td>
                            <td>Callback to invoke when a message is closed.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ui-growl</td>
                            <td>Main container element.</td>
                        </tr>
                        <tr>
                            <td>ui-growl-container</td>
                            <td>Container of a message item.</td>
                        </tr>
                        <tr>
                            <td>ui-growl-item</td>
                            <td>Message element.</td>
                        </tr>
                        <tr>
                            <td>ui-growl-icon-close</td>
                            <td>Close icon of a message.</td>
                        </tr>
                        <tr>
                            <td>ui-growl-image</td>
                            <td>Severity icon.</td>
                        </tr>
                        <tr>
                            <td>ui-growl-message</td>
                            <td>Container of message texts.</td>
                        </tr>
                        <tr>
                            <td>ui-growl-title</td>
                            <td>Summary of the message.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/growl" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-growl [(value)]="msgs"gt;&lt;/p-growl&gt;

&lt;div&gt;
    &lt;button type="button" pButton (click)="showSuccess()" label="Success" class="ui-button-success"&gt;&lt;/button&gt;
    &lt;button type="button" pButton (click)="showInfo()" label="Info" class="ui-button-info"&gt;&lt;/button&gt;
    &lt;button type="button" pButton (click)="showWarn()" label="Warn" class="ui-button-warning"&gt;&lt;/button&gt;
    &lt;button type="button" pButton (click)="showError()" label="Error" class="ui-button-error"&gt;&lt;/button&gt;
    &lt;button type="button" pButton (click)="showMultiple()" label="Multiple"&gt;&lt;/button&gt;
    &lt;button type="button" pButton (click)="clear()" icon="fa-close" style="float:right" label="Clear"&gt;&lt;/button&gt;
&lt;/div&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;Message&#125; from 'primeng/primeng';

export class GrowlDemo &#123;

    msgs: Message[] = [];

    showSuccess() &#123;
        this.msgs = [];
        this.msgs.push(&#123;severity:'success', summary:'Success Message', detail:'Order submitted'&#125;);
    &#125;

    showInfo() &#123;
        this.msgs = [];
        this.msgs.push(&#123;severity:'info', summary:'Info Message', detail:'PrimeNG rocks'&#125;);
    &#125;

    showWarn() &#123;
        this.msgs = [];
        this.msgs.push(&#123;severity:'warn', summary:'Warn Message', detail:'There are unsaved changes'&#125;);
    &#125;

    showError() &#123;
        this.msgs = [];
        this.msgs.push(&#123;severity:'error', summary:'Error Message', detail:'Validation failed'&#125;);
    &#125;

    showMultiple() &#123;
        this.msgs = [];
        this.msgs.push(&#123;severity:'info', summary:'Message 1', detail:'PrimeNG rocks'&#125;);
        this.msgs.push(&#123;severity:'info', summary:'Message 2', detail:'PrimeUI rocks'&#125;);
        this.msgs.push(&#123;severity:'info', summary:'Message 3', detail:'PrimeFaces rocks'&#125;);
    &#125;

    clear() &#123;
        this.msgs = [];
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>